@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "../../ace-editor"

#spell-view
  margin-top: 10px
  padding-top: 20px
  padding-left: 30px
  padding-bottom: 95px
  display: none
  position: relative
  z-index: 1

  &.shown
    display: block

  .code-background
    position: absolute
    top: -68px
    left: 0px
    height: 100%
    right: -10px
    border: 1px solid transparent

  span.code-background
    border-width: 115px 76px 64px 40px
    border-image: url(/images/level/code_editor_background_border.png) 124 76 64 40 fill stretch
    // Increase contrast with code
    filter: brightness(1.2)

  img.code-background
    display: none
    width: 100%

  .save-status
    display: none
    position: absolute
    top: 0px
    left: 20px
    z-index: 4

  .programming-language-container
    position: absolute
    top: 0
    right: 15px
    z-index: 4
    font-family: "Open Sans Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif
    font-size: 14px
    padding: 0px 10px
    .programming-language-label
      color: #6E654B
      font-weight: bold
      text-transform: uppercase
    .programming-language
      color: darkred

    @media screen and (max-aspect-ratio: 2 / 1)
      @media screen and (min-aspect-ratio: 1 / 1)
        // Narrow screens might have a very narrow code editor without space for this
        display: none

  @include ace

.ace_autocomplete .ace_line:not(.ace_selected) .ace_completion-meta
  // Don't show "press enter" on lines that aren't currently selected
  display: none

